<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小组成果 - 流光小队</title>
    <link rel="stylesheet" href="../../css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        .achievements-section {
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 20px;
        }

        .achievements-header {
            text-align: center;
            margin-bottom: 50px;
        }

        .achievements-header h1 {
            font-size: 2.5em;
            color: #2d3748;
            margin-bottom: 15px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .achievements-header p {
            font-size: 1.2em;
            color: #718096;
            max-width: 600px;
            margin: 0 auto;
        }

        .achievements-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 50px;
        }

        .stat-card {
            background: white;
            border-radius: 12px;
            padding: 25px;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            border: 1px solid #e2e8f0;
        }

        .stat-number {
            font-size: 2.5em;
            font-weight: bold;
            color: #667eea;
            margin-bottom: 10px;
        }

        .stat-label {
            color: #718096;
            font-size: 1.1em;
        }

        .achievements-tabs {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 40px;
            flex-wrap: wrap;
        }

        .tab-btn {
            padding: 12px 24px;
            border: none;
            border-radius: 25px;
            background: #f7fafc;
            color: #718096;
            font-size: 1em;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .tab-btn.active {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        .tab-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
        }

        .achievements-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 30px;
            margin-bottom: 50px;
        }

        .achievement-card {
            background: white;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            border: 1px solid #e2e8f0;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .achievement-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
        }

        .achievement-image {
            width: 100%;
            height: 200px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 3em;
            position: relative;
        }

        .achievement-image::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.8) 0%, rgba(118, 75, 162, 0.8) 100%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .achievement-card:hover .achievement-image::before {
            opacity: 1;
        }

        .achievement-badge {
            position: absolute;
            top: 15px;
            right: 15px;
            padding: 5px 12px;
            border-radius: 15px;
            font-size: 0.8em;
            font-weight: 600;
            color: white;
        }

        .badge-award {
            background: #d69e2e;
        }

        .badge-project {
            background: #38a169;
        }

        .badge-research {
            background: #3182ce;
        }

        .achievement-content {
            padding: 25px;
        }

        .achievement-title {
            font-size: 1.3em;
            font-weight: 600;
            color: #2d3748;
            margin-bottom: 10px;
            line-height: 1.4;
        }

        .achievement-meta {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 15px;
            font-size: 0.9em;
            color: #718096;
        }

        .meta-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .meta-item i {
            color: #667eea;
        }

        .achievement-description {
            color: #4a5568;
            line-height: 1.6;
            margin-bottom: 20px;
        }

        .achievement-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 20px;
        }

        .achievement-tag {
            background: #f7fafc;
            color: #4a5568;
            padding: 4px 12px;
            border-radius: 15px;
            font-size: 0.85em;
            font-weight: 500;
        }

        .achievement-stats {
            display: flex;
            justify-content: space-between;
            padding-top: 15px;
            border-top: 1px solid #e2e8f0;
        }

        .stat-item {
            text-align: center;
        }

        .stat-value {
            font-size: 1.2em;
            font-weight: 600;
            color: #667eea;
        }

        .stat-label {
            font-size: 0.8em;
            color: #718096;
            margin-top: 2px;
        }

        .achievement-actions {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }

        .action-btn {
            flex: 1;
            padding: 10px 15px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            background: white;
            color: #4a5568;
            font-size: 0.9em;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
            text-decoration: none;
        }

        .action-btn:hover {
            background: #667eea;
            color: white;
            border-color: #667eea;
        }

        .action-btn.primary {
            background: #667eea;
            color: white;
            border-color: #667eea;
        }

        .action-btn.primary:hover {
            background: #5a67d8;
        }

        .awards-showcase {
            background: #f7fafc;
            border-radius: 16px;
            padding: 40px;
            margin-bottom: 50px;
        }

        .showcase-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .showcase-header h2 {
            font-size: 2em;
            color: #2d3748;
            margin-bottom: 10px;
        }

        .showcase-header p {
            color: #718096;
            font-size: 1.1em;
        }

        .awards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 25px;
        }

        .award-item {
            background: white;
            border-radius: 12px;
            padding: 25px;
            text-align: center;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s ease;
        }

        .award-item:hover {
            transform: translateY(-5px);
        }

        .award-icon {
            font-size: 3em;
            color: #d69e2e;
            margin-bottom: 15px;
        }

        .award-title {
            font-size: 1.2em;
            font-weight: 600;
            color: #2d3748;
            margin-bottom: 10px;
        }

        .award-description {
            color: #718096;
            line-height: 1.5;
            margin-bottom: 15px;
        }

        .award-date {
            color: #667eea;
            font-weight: 500;
        }

        @media (max-width: 768px) {
            .achievements-tabs {
                gap: 8px;
            }

            .tab-btn {
                padding: 10px 20px;
                font-size: 0.9em;
            }

            .achievements-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .awards-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <!-- 侧边栏 -->
    <div class="sidebar" id="sidebar">
        <div class="sidebar-header">
            <h3>流光小队</h3>
            <button class="sidebar-toggle" onclick="toggleSidebar()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <nav class="sidebar-nav">
            <ul>
                <li>
                    <a href="../../index.html">
                        <i class="fas fa-home"></i>
                        首页
                    </a>
                </li>
                <li>
                    <a href="../about/index.html">
                        <i class="fas fa-info-circle"></i>
                        关于我们
                    </a>
                </li>
                
                <!-- 成员相关 -->
                <li>
                    <a href="../members/index.html">
                        <i class="fas fa-users"></i>
                        成员介绍
                    </a>
                </li>
                <li>
                    <a href="../excellent/index.html">
                        <i class="fas fa-star"></i>
                        优秀成员
                    </a>
                </li>
                
                <!-- 活动相关 -->
                <li>
                    <a href="../activities/upcoming.html">
                        <i class="fas fa-calendar-alt"></i>
                        活动预告
                    </a>
                </li>
                <li>
                    <a href="../activities/past.html">
                        <i class="fas fa-history"></i>
                        往期活动
                    </a>
                </li>
                <li>
                    <a href="../activities/calendar.html">
                        <i class="fas fa-calendar"></i>
                        活动日历
                    </a>
                </li>
                
                <!-- 成果与资源 -->
                <li class="active">
                    <a href="index.html">
                        <i class="fas fa-trophy"></i>
                        小组成果
                    </a>
                </li>
                <li>
                    <a href="../resources/index.html">
                        <i class="fas fa-book"></i>
                        学习资料
                    </a>
                </li>
                <li>
                    <a href="../resources/shares.html">
                        <i class="fas fa-share-alt"></i>
                        成员分享
                    </a>
                </li>
                
                <!-- 互动与讨论 -->
                <li>
                    <a href="../interaction/index.html">
                        <i class="fas fa-comments"></i>
                        互动交流
                    </a>
                </li>
                
                <!-- 加入与联系 -->
                <li>
                    <a href="../join/index.html">
                        <i class="fas fa-user-plus"></i>
                        加入我们
                    </a>
                </li>
                <li>
                    <a href="../contact/index.html">
                        <i class="fas fa-address-book"></i>
                        联系方式
                    </a>
                </li>
                
                <!-- 其他扩展 -->
                <li>
                    <a href="../partners/index.html">
                        <i class="fas fa-handshake"></i>
                        合作伙伴
                    </a>
                </li>
                <li>
                    <a href="../faq/index.html">
                        <i class="fas fa-question-circle"></i>
                        常见问题
                    </a>
                </li>
            </ul>
        </nav>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
        <!-- 顶部导航栏 -->
        <div class="topbar">
            <div class="topbar-left">
                <button class="menu-toggle" onclick="toggleSidebar()">
                    <i class="fas fa-bars"></i>
                </button>
                <h1>小组成果</h1>
            </div>
        </div>

        <!-- 内容区域 -->
        <div class="content">
            <div class="achievements-section">
                <!-- 页面标题 -->
                <div class="achievements-header">
                    <h1>小组成果</h1>
                    <p>展示流光小队在科技创新道路上的优秀成果和荣誉</p>
                </div>

                <!-- 成果统计 -->
                <div class="achievements-stats">
                    <div class="stat-card">
                        <div class="stat-number">25+</div>
                        <div class="stat-label">完成项目</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-number">15+</div>
                        <div class="stat-label">获得奖项</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-number">8+</div>
                        <div class="stat-label">发表论文</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-number">3+</div>
                        <div class="stat-label">专利申请</div>
                    </div>
                </div>

                <!-- 成果分类标签 -->
                <div class="achievements-tabs">
                    <button class="tab-btn active" onclick="switchTab('all')" data-tab="all">
                        <i class="fas fa-th"></i> 全部成果
                    </button>
                    <button class="tab-btn" onclick="switchTab('projects')" data-tab="projects">
                        <i class="fas fa-code"></i> 项目作品
                    </button>
                    <button class="tab-btn" onclick="switchTab('awards')" data-tab="awards">
                        <i class="fas fa-trophy"></i> 获奖成果
                    </button>
                    <button class="tab-btn" onclick="switchTab('research')" data-tab="research">
                        <i class="fas fa-microscope"></i> 研究成果
                    </button>
                    <button class="tab-btn" onclick="switchTab('patents')" data-tab="patents">
                        <i class="fas fa-lightbulb"></i> 专利申请
                    </button>
                </div>

                <!-- 成果展示网格 -->
                <div class="achievements-grid" id="achievementsGrid">
                    <!-- 成果卡片将通过JavaScript动态生成 -->
                </div>

                <!-- 获奖展示 -->
                <div class="awards-showcase">
                    <div class="showcase-header">
                        <h2><i class="fas fa-medal"></i> 重要奖项</h2>
                        <p>流光小队在各类竞赛中获得的荣誉和认可</p>
                    </div>
                    <div class="awards-grid">
                        <div class="award-item">
                            <div class="award-icon">🏆</div>
                            <div class="award-title">全国大学生创新创业大赛一等奖</div>
                            <div class="award-description">凭借"智能校园管理系统"项目获得国家级最高荣誉</div>
                            <div class="award-date">2023年12月</div>
                        </div>
                        <div class="award-item">
                            <div class="award-icon">🥇</div>
                            <div class="award-title">ACM程序设计竞赛金奖</div>
                            <div class="award-description">在算法竞赛中展现出色的编程能力和团队协作</div>
                            <div class="award-date">2023年10月</div>
                        </div>
                        <div class="award-item">
                            <div class="award-icon">🎖️</div>
                            <div class="award-title">互联网+创新创业大赛银奖</div>
                            <div class="award-description">"智慧农业物联网平台"项目获得评委高度认可</div>
                            <div class="award-date">2023年9月</div>
                        </div>
                        <div class="award-item">
                            <div class="award-icon">🏅</div>
                            <div class="award-title">数学建模竞赛一等奖</div>
                            <div class="award-description">运用数学建模方法解决实际问题的优秀表现</div>
                            <div class="award-date">2023年8月</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 成果数据
        const achievements = [
            {
                id: 1,
                title: "智能校园管理系统",
                category: "projects",
                type: "project",
                date: "2023-12-15",
                team: "核心开发团队",
                description: "基于Web技术的智能校园管理系统，集成学生管理、课程管理、成绩查询等功能，提高校园管理效率。",
                tags: ["Web开发", "管理系统", "数据库"],
                icon: "🏫",
                stats: { users: 5000, downloads: 1200, rating: 4.8 }
            },
            {
                id: 2,
                title: "全国大学生创新创业大赛一等奖",
                category: "awards",
                type: "award",
                date: "2023-12-10",
                team: "全体成员",
                description: "凭借"智能校园管理系统"项目在全国大学生创新创业大赛中获得一等奖，展现了团队的技术实力和创新能力。",
                tags: ["国家级", "一等奖", "创新创业"],
                icon: "🏆",
                stats: { participants: 10000, teams: 500, prize: "一等奖" }
            },
            {
                id: 3,
                title: "基于深度学习的图像识别算法研究",
                category: "research",
                type: "research",
                date: "2023-11-20",
                team: "AI研究小组",
                description: "研究基于卷积神经网络的图像识别算法，在多个数据集上取得了优秀的识别准确率。",
                tags: ["深度学习", "图像识别", "算法研究"],
                icon: "🤖",
                stats: { accuracy: 95.2, papers: 2, citations: 15 }
            },
            {
                id: 4,
                title: "智能农业物联网平台",
                category: "projects",
                type: "project",
                date: "2023-10-15",
                team: "物联网团队",
                description: "结合物联网技术和人工智能，开发智能农业监控系统，实现农作物生长环境的自动监测和控制。",
                tags: ["物联网", "农业", "智能监控"],
                icon: "🌾",
                stats: { sensors: 50, farms: 10, efficiency: 85 }
            },
            {
                id: 5,
                title: "一种基于区块链的数据安全存储方法",
                category: "patents",
                type: "patent",
                date: "2023-09-30",
                team: "区块链研究小组",
                description: "提出了一种基于区块链技术的数据安全存储方法，有效解决了数据篡改和隐私保护问题。",
                tags: ["区块链", "数据安全", "专利申请"],
                icon: "🔗",
                stats: { claims: 8, citations: 5, status: "审查中" }
            },
            {
                id: 6,
                title: "ACM程序设计竞赛金奖",
                category: "awards",
                type: "award",
                date: "2023-10-08",
                team: "算法竞赛队",
                description: "在ACM国际大学生程序设计竞赛中获得金奖，展现了团队在算法设计和编程实现方面的卓越能力。",
                tags: ["ACM", "算法竞赛", "金奖"],
                icon: "🥇",
                stats: { problems: 8, time: 240, rank: 1 }
            }
        ];

        let currentTab = 'all';

        function toggleSidebar() {
            const sidebar = document.getElementById('sidebar');
            sidebar.classList.toggle('open');
        }

        function switchTab(tab) {
            currentTab = tab;
            
            // 更新标签按钮状态
            document.querySelectorAll('.tab-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            document.querySelector(`[data-tab="${tab}"]`).classList.add('active');
            
            // 重新渲染成果列表
            renderAchievements();
        }

        function renderAchievements() {
            const grid = document.getElementById('achievementsGrid');
            const filteredAchievements = currentTab === 'all' 
                ? achievements 
                : achievements.filter(achievement => achievement.category === currentTab);
            
            grid.innerHTML = filteredAchievements.map(achievement => `
                <div class="achievement-card">
                    <div class="achievement-image">
                        ${achievement.icon}
                        <div class="achievement-badge badge-${achievement.type}">
                            ${getTypeText(achievement.type)}
                        </div>
                    </div>
                    <div class="achievement-content">
                        <div class="achievement-title">${achievement.title}</div>
                        <div class="achievement-meta">
                            <div class="meta-item">
                                <i class="fas fa-calendar"></i>
                                <span>${achievement.date}</span>
                            </div>
                            <div class="meta-item">
                                <i class="fas fa-users"></i>
                                <span>${achievement.team}</span>
                            </div>
                        </div>
                        <div class="achievement-description">${achievement.description}</div>
                        <div class="achievement-tags">
                            ${achievement.tags.map(tag => `<span class="achievement-tag">${tag}</span>`).join('')}
                        </div>
                        <div class="achievement-stats">
                            ${Object.entries(achievement.stats).map(([key, value]) => `
                                <div class="stat-item">
                                    <div class="stat-value">${value}</div>
                                    <div class="stat-label">${getStatLabel(key)}</div>
                                </div>
                            `).join('')}
                        </div>
                        <div class="achievement-actions">
                            <button class="action-btn" onclick="showAchievementDetail(${achievement.id})">
                                <i class="fas fa-eye"></i> 详情
                            </button>
                            <button class="action-btn primary" onclick="viewAchievement(${achievement.id})">
                                <i class="fas fa-external-link-alt"></i> 查看
                            </button>
                        </div>
                    </div>
                </div>
            `).join('');
        }

        function getTypeText(type) {
            const typeMap = {
                'project': '项目',
                'award': '奖项',
                'research': '研究',
                'patent': '专利'
            };
            return typeMap[type] || type;
        }

        function getStatLabel(key) {
            const labelMap = {
                'users': '用户',
                'downloads': '下载',
                'rating': '评分',
                'participants': '参赛',
                'teams': '团队',
                'prize': '奖项',
                'accuracy': '准确率',
                'papers': '论文',
                'citations': '引用',
                'sensors': '传感器',
                'farms': '农场',
                'efficiency': '效率',
                'claims': '权利要求',
                'status': '状态',
                'problems': '题目',
                'time': '时间',
                'rank': '排名'
            };
            return labelMap[key] || key;
        }

        function showAchievementDetail(id) {
            const achievement = achievements.find(a => a.id === id);
            if (achievement) {
                const detailText = `
🏆 成果详情

名称：${achievement.title}
类型：${getTypeText(achievement.type)}
日期：${achievement.date}
团队：${achievement.team}

📝 描述：
${achievement.description}

🏷️ 标签：
${achievement.tags.join('、')}

📊 统计数据：
${Object.entries(achievement.stats).map(([key, value]) => `• ${getStatLabel(key)}: ${value}`).join('\n')}
                `;
                alert(detailText);
            }
        }

        function viewAchievement(id) {
            const achievement = achievements.find(a => a.id === id);
            if (achievement) {
                alert(`正在跳转到"${achievement.title}"的详细页面...\n\n🔗 链接：https://example.com/achievement/${achievement.id}`);
            }
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            renderAchievements();
            
            // 设置当前页面的导航项为激活状态
            document.querySelectorAll('.sidebar-nav li').forEach(li => {
                li.classList.remove('active');
            });
            document.querySelector('.sidebar-nav li:nth-child(9)').classList.add('active');
        });
    </script>
</body>
</html> 